import React from 'react';
import { isEqual } from 'lodash'; 
import {WeaErrorPage, WeaTools, WeaTextarea, WeaLocaleProvider} from 'ecCom';
const { ls } = WeaTools;
const getLabel = WeaLocaleProvider.getLabel;
//便签元素
class ScratchpadCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.data.text,
            disabled: false,
        }
        this.getBytesLength = this.getBytesLength.bind(this);
        this.subStringByBytes = this.subStringByBytes.bind(this);
        this.saveScratchpad = this.saveScratchpad.bind(this);
        this.saveContent = this.saveContent.bind(this);
    }

    getBytesLength(str) {
	    // 在GBK编码里，除了ASCII字符，其它都占两个字符宽
	    return str.replace(/[^\x00-\xff]/g, 'xx').length;
	}
	subStringByBytes(val, maxBytesLen) {
	    var len = maxBytesLen;
	    var result = val.slice(0, len);
	    while (getBytesLength(result) > maxBytesLen) {
	        result = result.slice(0, --len);
	    }
	    return result;
	}
	saveScratchpad(padcontent){
		this.state = {
            text: padcontent,
            disabled: true,
        }
        this.onSave(padcontent)
	}

    onSave(text){
        const len = this.getBytesLength(text);
        if (len > 4000) {
            const reply = confirm(getLabel(388031,"便签内容超过4000字节,内容将被截取,是否保存?"));
            if (reply) {
                text = subStringByBytes(padcontent, 4000);
                this.saveContent(text);
            } else {
                this.state = {
                    disabled: false,
                }
            }
        } else {
            this.saveContent(text);
        }
    }

	saveContent(padcontent){
		const { eid, data } = this.props;
		const { userid } = data;
        ls.set('edata-'+eid,padcontent);
	    WeaTools.callApi('/api/portal/scratchpad/saveScratchpad', 'POST', {
            eid,
            userid,
            operation: 'save',
            padcontent
        },'text').then((result)=>{
	        this.state = {
	            disabled: false,
	        }
	    })
	}

	componentWillReceiveProps(nextProps){
        if(!isEqual(this.state.text, nextProps.data.text)){
            this.setState({
                text: nextProps.data.text,
            })
        }
	}

	shouldComponentUpdate(nextProps){
		if(!isEqual(this.state.text, nextProps.data.text) || !isEqual(this.props.data.height, nextProps.data.height)){
            return true;
		}
	}

	componentWillUnmount(){
    	const {text} = this.state;
       	this.onSave(text);
	}

	render() {
		const { eid, data } = this.props;
		const { text, disabled } = this.state;
		return (
            <div className={'scratchpad'} id={`scratchpad_${eid}`}>
                <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@ir8nao`}
                    id={`scratchpadarea_${eid}`}
                    style={{height: data.height + 'px'}}
                    value={text}
					viewAttr={disabled ? 1 : 2}
					onChange={(v) => {this.setState({text: v})}}
                    onBlur={this.saveScratchpad}/>
            </div>
		)
	}
}

class MyErrorHandler extends React.Component {
	render() {
		const hasErrorMsg = this.props.error && this.props.error !== "";
		return (
			<WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@ahzytw`} msg={hasErrorMsg?this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
		);
	}
}
ScratchpadCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(ScratchpadCom);
export default ScratchpadCom;